<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>销售工具</el-breadcrumb-item>
                <el-breadcrumb-item>销售出库</el-breadcrumb-item>
            </el-breadcrumb>



            <!-- <div class="btnBox">
                <el-button type="primary" size="small" @click="addHandle">销售出库</el-button>
            </div> -->

            <el-table :data="stockList" border style="width: 100%" height="620"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="outNumber" label="单据编号"></el-table-column>
                <el-table-column prop="customerName" label="客户名称"></el-table-column>

                <el-table-column prop="outDate" label="业务日期" width='180'></el-table-column>
                <el-table-column prop="userName" label="业务员"></el-table-column>
                <el-table-column prop="invoice" label="发票类型"></el-table-column>
                <el-table-column label="物流公司">
                    <template slot-scope="scope">
                        {{ scope.row.logisticsCompany || '— —' }}
                    </template>
                </el-table-column>
                <el-table-column label="物流单号">
                    <template slot-scope="scope">
                        {{ scope.row.logisticsTracking || '— —' }}
                    </template>
                </el-table-column>
                <el-table-column label="物流状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.shippingStatus == 1">已发货</el-tag>
                        <el-tag type="danger" v-else>未发货</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="productStatus" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.applyStatus == 1">已审核</el-tag>
                        <el-tag type="danger" v-else>未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="outNote" label="备注"></el-table-column>
                <el-table-column label="操作" width='260'>
                    <template slot-scope="scope">
                        <el-button size="small" @click="applyHandle(scope.row, 1)" v-if="scope.row.applyStatus == 0"
                            plain>审核</el-button>
                        <el-button size="small" @click="checkHandle(scope.row)" plain>查看详情</el-button>
                        <el-button size="small" @click="sendHandle(scope.row)" plain
                            v-if="scope.row.shippingStatus != 1">发货</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[20, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>


            <el-dialog title="销售出库" :visible.sync="dialogVisible" width="30%" top="4%" :before-close="handleClose">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="客户名称" prop="customerName">
                        <el-input v-model="form.customerName" placeholder="请输入客户名称"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitHandle">确 定</el-button>
                </span>
            </el-dialog>



            <el-dialog title="销售详情" :visible.sync="detailDia" width="60%" top="4%" :before-close="detailHandleClose">
                <el-table :data="detailList" border style="width: 100%" height="520">
                    <el-table-column prop="productName" label="商品名称"></el-table-column>
                    <el-table-column prop="barCode" label="批号"></el-table-column>
                    <el-table-column prop="warehouseName" label="仓库"></el-table-column>
                    <el-table-column prop="productPrice" label="单价"></el-table-column>
                    <el-table-column prop="itemUnit" label="单位"></el-table-column>
                    <el-table-column prop="productNum" label="数量"></el-table-column>
                    <el-table-column label="总金额">
                        <template slot-scope="scope">
                            {{ scope.row.productTotal.toFixed(2) }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paginationBox">
                    <el-pagination @size-change="dHandleSizeChange" @current-change="dHandleCurrentChange"
                        :current-page="dPageNum" :page-sizes="[20, 50, 100]" :page-size="dPageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="dTotal">
                    </el-pagination>
                </div>
            </el-dialog>


            <el-dialog title="发货" :visible.sync="wuLiuDialogVisible" width="400px">
                <el-form :model="wuliuInfo">
                    <el-form-item label="物流公司">
                        <el-input v-model="wuliuInfo.outCom" placeholder="请输入物流公司"></el-input>
                    </el-form-item>
                    <el-form-item label="物流单号">
                        <el-input v-model="wuliuInfo.wuliu" placeholder="请输入物流单号"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="wuLiuDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="subWuLiuHandle">确 定</el-button>
                </div>
            </el-dialog>



        </el-card>
    </div>
</template>
<script>

import { addOutStockLogistics, applyOutStockItem, getOutStock, getOutStockItem } from '../../network/saleout'

export default {
    name: 'product',
    data() {
        return {
            stockList: [],
            dialogVisible: false,
            form: {
                applyStatus: 0,
                companyId: 0,
                customerAddress: "",
                customerId: 0,
                customerName: "",
                customerShopName: "",
                customerTel: "",
                invoice: "",
                outDate: "",
                outId: 0,
                outNote: "",
                outNumber: "",
                productNum: 0,
                totalMoney: 0,
                userId: 0,
                userName: ""
            },
            rules: {
                customerName: [
                    { required: true, message: '请输入客户名称', trigger: 'blur' },
                ],
            },
            pageNum: 1,
            pageSize: 20,
            total: 0,
            searchName: '',
            detailDia: false,//销售详情 弹窗
            detailList: [],// 销售详情
            dPageNum: 1,
            dPageSize: 20,
            dTotal: 0,
            selectItem: '',
            wuLiuDialogVisible: false, //物流邮寄弹窗
            wuliuInfo: {

                outCom: '',
                wuliu: '',
            },
            selectOutId: ''
        }
    },
    created() {
        this.getList()
    },
    methods: {


        // 发货
        sendHandle(obj) {

            this.wuliuInfo.outCom = ''
            this.wuliuInfo.wuliu = ''
            this.selectOutId = obj.outId
            this.wuLiuDialogVisible = true
        },
        //  提交  发货
        subWuLiuHandle() {
            if (this.wuliuInfo.outCom == '') {
                this.$message.warning('请输入发货物流')
                return
            } else if (this.wuliuInfo.wuliu == '') {
                this.$message.warning('请输入物流单号')
                return
            }

            console.log(this.wuliuInfo);
            console.log(this.selectOutId);


            addOutStockLogistics({
                outId: this.selectOutId,
                logisticsName: this.wuliuInfo.outCom,
                logisticsNum: this.wuliuInfo.wuliu,
            }).then(res => {
                if (res.flag) {
                    this.$message.success('操作成功')
                    this.wuLiuDialogVisible = false
                    this.getList()
                }
            })
        },

        applyHandle(obj) {
            this.$confirm('是否通过出库审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                applyOutStockItem({
                    outId: obj.outId
                }).then(res => {
                    if (res.flag) {
                        this.getList()
                        this.$message.success('审核成功')
                    } else {
                        this.$message.warning('审核失败')
                    }
                })
            }).catch(() => {
            });

        },

        checkHandle(obj) {
            this.selectItem = obj
            this.dPageNum = 1
            this.dPageSize = 20
            getOutStockItem({
                outId: obj.outId,
                pageNum: this.dPageNum,
                pageSize: this.dPageSize,
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.detailList = res.data.list
                    this.dTotal = res.data.total
                    this.detailDia = true
                }
            })
        },


        submitHandle() {
            this.$refs.ruleForm.validate((valid) => {
                console.log(valid);

                if (!valid) return

                console.log(this.form);

                addFactory({
                    factoryName: this.form.factoryName,
                    factoryStatus: this.form.factoryStatus,
                }).then(res => {
                    console.log(res);
                    if (res.flag) {
                        this.getList();
                        this.handleClose();
                        this.dialogVisible = false
                        this.$message.success("添加成功");
                    } else {
                        console.log(res);
                        this.$message.success("添加失败");
                    }
                });
            });

        },
        addHandle() {
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false

            this.$refs.ruleForm.resetFields()
        },

        detailHandleClose() {
            this.detailDia = false
        },

        getList() {
            getOutStock({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                companyId: sessionStorage.companyId,
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.stockList = res.data.list
                    this.total = res.data.total
                }
            })
        },

        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getList()
        },
        dHandleSizeChange(val) {
            this.dPageSize = val
            this.checkHandle(this.selectItem)
        },
        dHandleCurrentChange(val) {
            this.dPageNum = val
            this.checkHandle(this.selectItem)
        },
        searchHandle() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },
        clearInput() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },


    }
}
</script>

<style lang="less" scoped>
.paginationBox {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
    border-radius: 8px;
}

.image-control {
    display: block;
    border-radius: 8px;
    width: 100px;
    height: 100px;
}

.input-with-select {
    margin-left: 15px;
    width: 300px;
}

.btnBox {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
</style>